<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  
</body>
<script>

  // function fn(){}
  // 正常函数，正常使用

  // function(){}
  // 函数值，非正常函数，不能直接使用
    // 赋值式创建函数：const fn = function(){}
    // 作为参数：fn( function(){} )
    // 返回值：function fn(){ return function(){} }
    // 事件处理函数：btn.onclick = function(){}
    // 匿名函数的函数体：( function(){} )()

  // ;(function(){})();
  // 匿名函数，自动执行，用来创建一个新作用域

  
  // 完整语法：()=>{}
  // 函数值的形式，直接存在不报错，但没法使用
  // ()=>{
  //   console.log(1)
  // }


  // 赋值式创建函数：const fn = ()=>{}
  const fn = (a)=>{
    return "hello " + a
  }
  console.log(fn("world"));

  // 作为参数：fn( ()=>{} )
  const fun = ( a )=>{
    a();
  }
  fun( ()=>{ console.log("作为参数使用") } );

  // 返回值：function fn(){ return ()=>{} }
  function fuu(){ return ()=>{ console.log("作为返回值使用") } }
  console.log( fuu() );
  fuu()();

  // 事件处理函数：btn.onclick = ()=>{}（不建议使用）
  document.onclick = ()=>{
    console.log("事件处理函数")
  }

  // 匿名函数的函数体：( ()=>{} )()
  ;(()=>{
    console.log("匿名函数")
  })();


  // ======


  // 极简语法：=>

  // 有且只有一个形参时，可以省略小括号

  const fnn = a => {
    console.log("hello " + a)
  }
  fnn("admin");

  // 有且直接返回 值时，可以省略花括号和return
  // 花括号和return必须同时省略

  const fff = a => "hello " + a;
  console.log( fff("root") )


  // ========


  // 特点：
  // 语法极简
  // 可读性差
  // 箭头函数内没有this，自动使用外层this

  const obj = {
    name:"obj",
    fn: function(){
      console.log(this);

      const f1 = ()=>{
        console.log(this)
      }
      f1();

      const f2 = function(){
        console.log(this)
      }
      f2();
    }
  }
  obj.fn();


  // 箭头函数不能被new执行

  function func(){}
  new func();

  const func2 = ()=>{}
  // new func2();

  // 不建议将箭头函数作为事件处理函数使用，因为箭头函数内没有this，会导致在事件处理函数内无法通过this获取事件源

  // ===========



  // 箭头函数的便捷性

  var arr = [34,56,75,43,21,35,7,8];

  arr.forEach( val=>{ console.log(val) } );

  console.log( arr.map( val => val*=1.3 ) );
  console.log( arr.filter( val => val%2 ) );
  console.log( arr.every( val => typeof val==="number" ) );
  console.log( arr.some( val => typeof val==="string" ) );

  console.log( arr.reduce( (prev,val)=>prev+val, 0 ) );

  console.log( arr.sort( (a,b)=>a-b ) );



</script>
</html>